<template>
	<view :data-theme="theme()" :class="theme() || ''">
		<view class="top-tabbar">
			<view v-for="(item,index) in tabsList" :key="index"
				:class="state_active == index ? 'tab-item active' : 'tab-item'" @click="stateFunc(index)">
				{{item.name}}
			</view>
		</view>
		<view class="listCss">
			<scroll-view scroll-y="true" class="scrollView" @scrolltolower="onWaytolwer">
				<view v-for="(item,index) in list" :key="index" class="m-0-20 radius20">
					<view class="scrollView-item">
						<image v-if="tabsList[state_active].type != 4" :src="item.avatarUrl" mode="heightFix"></image>
						<view>
							<view v-if="tabsList[state_active].type != 4" class="f30">{{item.nickName}}</view>
							<view v-else class="f30">{{item.description}}</view>
							<view class="gray9">{{item.createTime}}</view>
						</view>
						<view class="flex-1 tr mr30 fb f32">{{item.income}}</view>
					</view>
				</view>
				<view class="tc gray" v-if="!lis || !list.length">没有更多</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				state_active: 0,
				tabsList: [{
					name: '礼包奖励',
					type: 1
				}, {
					name: '购物奖励',
					type: 2
				}, {
					name: '会员奖励',
					type: 3
				}, {
					name: '分红奖励',
					type: 4
				}, {
					name: '佣金支出',
					type: 5
				}],
				list: [],
				pageIndex: 1,
				continue: false

			}
		},
		onLoad(option) {

		},
		onShow() {
			this.getData(this.tabsList[this.state_active].type)
		},
		methods: {
			// tabs切换
			stateFunc(index) {
				this.state_active = index
				this.pageIndex = 1
				this.continue = false
				this.list = []
				this.getData(this.tabsList[this.state_active].type)
			},
			//获取数据
			getData(type) {
				let that = this
				if (that.continue) return
				uni.showLoading({
					title: '加载中'
				})
				that._get('user/agent/agentMoneyDetail', {
					type: type,
					pageIndex: that.pageIndex,
					pageSize: 10
				}, function(res) {
					if (10 * that.pageIndex > res.data.total) that.continue = true
					that.pageIndex++
					if (that.list || that.list.length) {
						that.list = that.list.concat(res.data.records)
					} else {
						that.list = res.data.records
					}
					console.log(that.list);
					uni.hideLoading();
				});
			},
			//下拉
			onWaytolwer() {
				this.getData(this.tabsList[this.state_active].type)
			},
		}

	}
</script>

<style lang="scss" scoped>
	.listCss {
		margin: 20rpx 0;

		.scrollView {
			height: 80vh;

			.scrollView-item {
				background-color: #FFF;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				padding: 10rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					display: block;
					border-radius: 50%;
					margin-right: 20rpx;
					background-color: #F1F1F1;
				}

				.f30 {
					height: 80rpx;
				}
			}
		}
	}
</style>